<template>
  <li class="goods-item" v-if="data">
    <div class="goods-item-mask" :data-id="data.goods_id" :data-gid="data.id"></div>
    <img :src="data.thumb" alt class="goods-cover" />
    <div class="goods-info">
      <div class="goods-title">{{ data.title }}</div>
      <div class="goods-sku" v-if="data.option_title"  :style="{ visibility: data.option_title ? 'visible' : 'hidden' }">规格：{{ data.option_title }}</div>
      <div v-if="show_price&&show_price_flag" class="goods-sku-discount_price">
        <span>￥{{ (data.price).toFixed(2) }}</span><span style="margin-left: 0.9375rem;">进货价￥{{(data.discount_price).toFixed(2)}}</span>
      </div>
      <div style="height:1.5625rem" v-if="!show_price && !data.option_title || !show_price_flag" ></div>
      <div class="goods-info-footer">
        <!-- <span class="goods-amount">
          <span>￥</span>
          {{ data.price||data.buying_price }}
        </span> -->
        <span class="goods-stock">库存：{{ data.stock }}</span>
        <div class="good-cell-buy-btn" @click.stop="showGoodDetail" v-show="isCart">
          <template v-if="!data.has_option">
            <div class="good-cell-btn good-cell-btn-1" v-if="!data.total" @click.stop="addCart">
              <i class="iconfont icon-life-game-plus"></i>
            </div>
            <div class="good-cell-btn-3" v-if="data.total && Number(data.total > 0)">
              <van-stepper
                theme="round"
                v-model.number="cartTotal"
                integer
                :disabled="this.$store.state.isloadding || Number(data.stock) == 0"
                button-size="24px"
                min="0"
                :max="data.stock"
                @change="onChange"
              />
            </div>
          </template>
          <div class="good-cell-btn good-cell-btn-2" v-if="data.has_option" @click.stop="addCart">
            选规格<em v-if="data.total">{{ data.total }}</em>
          </div>
        </div>
      </div>
      <div class="goods-info-footer">
        <span class="goods-stock" v-show="Number(data.agency_stock)>=0">您的库存：{{ data.agency_stock }}</span>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    data: null,
    goodsCartsTotal: {
      type: Array,
      default: () => []
    },
    show_price_flag:{
      type:Boolean,
      default:false
    },
    show_price:{
      type:Boolean,
      default:false
    },
    index: {
      type: Number,
      default: 0
    },
    idTag: {
      type: String,
      default: 'id'
    },
    isCart: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      cartTotal: null,
      timer: null
    };
  },
  methods: {
    showGoodDetail() {
      this.$emit("show", { id: this.data[this.idTag], index: this.index });
    },
    addCart() {
      this.$emit("add", { id: this.data[this.idTag], isSpecs: this.data.has_option, index: this.index,title: this.data.title });
    },
    onChange() {
      if (this.timer) clearTimeout(this.timer); //防抖
      this.timer = setTimeout(() => {
        this.$emit("change", { id: this.data[this.idTag], isSpecs: this.data.has_option, index: this.index, num: this.cartTotal, cartId: this.data.card_id });
      }, 500);
    }
  },
  watch: {
    "data.total"(newV, oldV) {
      this.cartTotal = newV;
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.option-text-btn {
  background: #f14e4e;
  font-size: 0.75rem;
  color: #fff;
  padding: 0 0.25rem;
  height: 1.375rem;
  line-height: 1.375rem;
  border-radius: 0.25rem;
  position: relative;

  em {
    position: absolute;
    top: -12px;
    right: -8px;
    border-radius: 1rem;
    background: #f14e4e;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.25rem;
    font-size: 12px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
  }
}
.goods-sku-discount_price{
  margin: 0.3125rem 0;
  color:#F25353;
  font-size: 0.75rem;
}
.goods-item {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0.875rem 0.625rem;
  text-align: left;
  border-radius: 0.4063rem;
  background-color: white;
}

.goods-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.goods-cover {
  flex-shrink: 0;
  width: 4.6875rem;
  height: 4.6875rem;
  border-radius: 0.2188rem;
}

.goods-info {
  flex-grow: 1;
  margin-left: 0.5rem;
}

.goods-title {
  display: -webkit-box;
  line-height: 1.0625rem;
  width: auto;
  font-size: 0.875rem;
  color: #000;
  margin: 0 auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-sku {
  width: 100%;
  height: 1.5625rem;
  line-height: 1.625rem;
  overflow: hidden;
  color: #999;
  font-size: 0.5938rem;
  text-overflow: ellipsis;
}

.goods-info-footer {
  font-size: 0.75rem;
  color: #999;
  display: flex;
  justify-content: space-between;
}

.goods-amount {
  font-size: 0.8125rem;
  color: #ff2c29;
}

.goods-amount span {
  font-size: 0.5625rem;
}

.goods-stock {
  /* padding-left: 1.0625rem; */
}
.good-cell-buy-btn{
  z-index: 99;
}

.good-cell-btn {
  background-color: #f15353;
  height: 1.25rem;
  line-height: 1.25rem;
  color: #fff;
  text-align: center;
}

.good-cell-btn-1 {
  width: 1.25rem;
  border-radius: 50%;
}

.good-cell-btn-2 {
  padding: 0 0.625rem;
  border-radius: 1rem;
  font-size: 10px;
  position: relative;

  em {
    padding: 0 0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 14px;
    position: absolute;
    top: -12px;
    right: -5px;
    background-color: #ff5d5c !important;
    color: #fff;
    border-radius: 0.875rem;
    box-shadow: 1px 1px 6px #b74444;
  }
}
</style>
